<template>
  <div class='wrap'>
    <div class='one'>
      <div class='setting'>
      <div class="setting-l">
        <i class='iconfont icon-saoyisao' @click="scan"></i>
      </div>
      <div class="setting-r">
        <div v-if="token"><i class='iconfont icon-jiahao' @click="setting">发布</i></div>
        <div><i class='iconfont icon-set' @click="setting"></i></div>
      </div>
      </div>
      <div>
        <div class="info" v-if="token">
          <div class="info-one">
            <van-image
              round
              fit="cover"
              width="2rem"
              height="2rem"
              :src="userInfo.avatar"
            />
            <div class="info-name">
              <b>{{userInfo.nickname || userInfo.user_name || "网友820820"}}</b><br/>
              <span><b>{{userInfo.myFocus || 0 }}</b>关注</span>
              <span><b>{{userInfo.myFans || 0 }}</b>粉丝</span>
              <!-- <span><b>{{userInfo.praise}}</b>获赞</span>暂时未开发 -->
            </div>
          </div>
          <div class="info-two" v-if="userInfo.introduce">
          <p>{{userInfo.introduce}}</p>
          </div>
          <div class="info-three">
            <p>IP 属地：{{userInfo.city || "未知"}}</p>
          </div>
          <div class="info-four">
            <van-button type="info" size="small" @click="$toast('暂时未开放 认证申请')">申请认证</van-button>
            <van-button type="info" size="small" @click="$router.push('/setting/profile')">编辑资料</van-button>
            <van-button type="info" size="small" @click="$toast('暂时未开发此功能')"><i class="iconfont icon-fenxiang"></i></van-button>
          </div>
        </div>
        <div class="cover" v-else @click="$router.push({
          name:'Login',
          query:{redirect:'/user'}
        })">登录</div>
      </div>
    </div>
    <div class="two">
      <van-grid :border="false" :column-num="4">
        <van-grid-item @click="goMyContent">
         <div class="item">
          <i class='iconfont icon-pinglun'></i>
          <span>评论</span>
         </div>
        </van-grid-item>
        <van-grid-item @click="goMyContent">
          <div  class="item">
          <i class='iconfont icon-shoucang'></i>
          <span>收藏</span>
         </div>
        </van-grid-item>
        <van-grid-item @click="$router.push('/download')">
          <div class="item">
          <i class='iconfont icon-xiazai'></i>
          <span>下载</span>
         </div>
        </van-grid-item>
        <van-grid-item @click="goMyContent">
          <div class="item">
          <i class='iconfont icon-lishi'></i>
          <span>历史</span>
         </div>
        </van-grid-item>
        <van-grid-item @click="$router.push('/user/information')">
          <div class="item">
          <i class='iconfont icon-xiaoxi'></i>
          <span>消息</span>
         </div>
        </van-grid-item>
        <van-grid-item @click="goMyContent">
          <div class="item">
          <i class='iconfont icon-dianzan'></i>
          <span>点赞</span>
         </div>
        </van-grid-item>
        <van-grid-item @click="goMyContent">
          <div class="item">
          <i class='iconfont icon-jubao'></i>
          <span>举报</span>
         </div>
        </van-grid-item>
        <van-grid-item @click="isAllServiceShow = true">
          <div class="item">
          <i class='iconfont icon-quanbu'></i>
          <span>全部</span>
         </div>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="bottom">
      <div class="three" v-if="!token">
      <span>“</span>分享今天值得记录的瞬间 <span>”</span>
      <div @click="goToPublish">
        <van-button  type="info" size="small"><i class='iconfont icon-jiahao'></i>发布</van-button>
      </div>
      </div>
      <div class="four" v-else>
        <van-tabs>
          <van-tab v-for="item in myList" :title="item.id==1 ? item.name + total : item.name" :key="item.id">
             <MyAllArticleList v-show="item.id==1" :data="myAllArticle"/>
            <!-- 内容 {{ item.name }} -->
          </van-tab>

        </van-tabs>
      </div>
    </div>
    <van-popup
      v-model="isAllServiceShow"
      position="right"
      :style="{ height: '100%' ,width: '100%'}"
      get-container="body"
    >
     <AllService @close="isAllServiceShow=false"/>
    </van-popup>
   </div>
</template>

<script >
import { mapGetters } from 'vuex'
import { getUserHomePage } from '@/api/user'
import { getUserArticle } from '@/api/article'
import AllService from '@/views/User/components/all-service.vue'
import MyAllArticleList from '@/components/Article/Article-list.vue'
export default {
  name: 'User',
  components: {
    AllService,
    MyAllArticleList
  },
  data () {
    return {
      myList: [
        { id: 0, name: '全部' },
        { id: 1, name: '文章' },
        { id: 2, name: '视频' },
        { id: 3, name: '问答' },
        { id: 4, name: '小视频' },
        { id: 5, name: '微头条' }

      ],
      isAllServiceShow: false,
      query:{
        pageNum:1, pageSize:10
      },
      myAllArticle:[],
      total:0
    }
  },
  computed: {
    ...mapGetters([
      'token', 'userInfo','userId'
    ])
  },
  created () {
    // this.getUserHomePage(this.userId)
    this.getUserArticle(this.userId)
  },
  methods: {
    // 获取用户主页信息
    async getUserHomePage(id){
      const userInfo = await getUserHomePage(id)
      this.$store.commit('user/SET_USERINFO',userInfo)
    },
    // 获取用户发布的文章列表 根据用户id
    async getUserArticle(id){
      const res = await getUserArticle(id,this.query)
      this.myAllArticle = res.list
      this.total = res.total
    },
    // 点击发布
    goToPublish () {
      console.log('点击发布按钮')
      this.$toast('请先登录')
    },
    setting () {
      console.log('点击设置')
      this.$router.push('/setting')
    },
    scan () {
      console.log('扫一扫')
    },
    goMyContent () {
      this.$router.push('/user/mycontent')
    }
  }
}
</script>
<style lang="scss" scoped>
.wrap{
  background-color: #f8f8f8;
  // height: 100vh;
}
.one{
  height: 270px;
  padding: 15px;
  text-align: center;
  box-sizing: border-box;
  .setting{
  display: flex;
  justify-content: space-between;
  .icon-saoyisao{font-size: 27px;}
  .icon-set {
    font-size: 31px;
  }
  .setting-r{
      display: flex;
      .icon-jiahao{font-size: 16px;
        margin-right: 10px;}
  // justify-content: space-between;
    }
}
.cover{
  width: 100px;
  height: 100px;
  background-color: rgb(210, 92, 92);
  border-radius:50px;
  line-height: 100px;
  color: #fff;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 35%);
  box-shadow: 0 0 10px #ddd;
}
.info{
  .info-one{
    display: flex;
    align-items: center;
    margin:20px 0px 15px 0px;
    .info-name{
      text-align: left;
      margin-left:10px;
      b{
        text-align: center;
        font-size:18px;
        font-weight: 500;
        margin-right:2px;
      }
      span{
        font-size: 12px;
        margin: 0 5px;
      }
    }
  }
  .info-two,.info-three{
    // max-height: 90px;
    p{margin:2px 0px 0px 0px;}
    text-align: left;
    font-size: 14px;
  }
  .info-four{
    text-align: left;
    .van-button{
      margin-top: 0px;
      margin-right: 6px;
    }
  }
}
}
.two{
  ::v-deep .van-grid-item__content{
    padding: 10px 0px;
  }
  .item{
    display: flex;
    flex-direction: column;
    .iconfont{
      font-size: 30px;
      margin-bottom: 3px;
    }
    font-size:14px;
  }
}
.three{
  // height: 500px;
  margin-top:4px;
  background-color: #fff;
  font-size: 16px;
  span{
    line-height: 100px;
    margin: 0 5px;
    font-size: 36px;
    color:#eee5e5;
  }
  .van-button__text{
    font-size: 16px;
  }

}
.bottom{
  margin-top: 5px;
}
</style>
